<template>
	<view>
		<view class="head" v-if="player">
			<image class="head-img" :src="player.profile.avatar"></image>
			<view class="head-name">{{player.profile.personaname}}</view>
			<view class="head-id">ID:{{player.profile.account_id}}</view>
		</view>
		<view>
			<view>
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
						{{item}}
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getUser
	} from '../../api/api.js'
	export default {
		data() {
			return {
				player: '',
				list: [{
					name: '十年'
				}, {
					name: '青春'
				}, {
					name: '之约'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs: [1, 2, 3]
			};
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			change(index) {
				this.current = index;
			},
			getUser(id) {
				uni.showLoading({
					title: '加载中'
				});
				getUser(id).then(res => {
					if (res.statusCode == 200) {
						uni.hideLoading();
						this.player = res.data
					}
				})
			},

		},
		onLoad(option) {
			this.id = option.id
			this.getUser(option.id)
		}
	}
</script>

<style lang="less">
	.head {
		width: 100%;
		background-color: #15191C;
		text-align: center;
		padding-bottom: 10px;

		.head-img {
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}

		.head-name {
			color: #fff;
			font-size: 14px;
			font-weight: bold;
		}

		.head-id {
			color: #666A6D;
			font-size: 12px;
		}
	}
</style>
